import { Button, List, Modal, Tabs } from "antd";
import React, { useState } from "react";
import type { RuleInfo } from "./rule";
import { AllRuleInfoList } from "./rule";
import { RecommendRuleKeyList } from "./revive";

interface SelectRuleModalProps {
    curRuleList: string[];
    onCancel: () => void;
    onSelect: (rule: RuleInfo) => void;
}

export default function SelectRuleModal(props: SelectRuleModalProps) {
    const recommendRuleList = AllRuleInfoList.filter(rule => RecommendRuleKeyList.includes(rule.id)).filter(rule => !props.curRuleList.includes(rule.id));
    const allRuleList = AllRuleInfoList.filter(rule => !props.curRuleList.includes(rule.id));

    const [activeKey, setActiveKey] = useState(recommendRuleList.length > 0 ? "recommend" : "all");

    return (
        <Modal title="增加规则" open footer={null}
            onCancel={e => {
                e.stopPropagation();
                e.preventDefault();
                props.onCancel();
            }}>
            <Tabs type="card" activeKey={activeKey} onChange={key => setActiveKey(key)}>
                {recommendRuleList.length > 0 && (
                    <Tabs.TabPane tab="推荐规则" key="recommend">
                        <List dataSource={recommendRuleList} style={{ maxHeight: "calc(100vh - 300px)", overflowY: "scroll" }} renderItem={item => (
                            <List.Item key={item.id}>
                                <Button type="link" onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    props.onSelect(item);
                                }}>{item.name}({item.id})</Button>
                            </List.Item>
                        )} />
                    </Tabs.TabPane>
                )}
                <Tabs.TabPane tab="全部规则" key="all">
                    <List dataSource={allRuleList} style={{ maxHeight: "calc(100vh - 300px)", overflowY: "scroll" }} renderItem={item => (
                        <List.Item key={item.id}>
                            <Button type="link" onClick={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                props.onSelect(item);
                            }}>{item.name}({item.id})</Button>
                        </List.Item>
                    )} />
                </Tabs.TabPane>
            </Tabs>
        </Modal>
    );
}